<template>
  <div class="POIContainer" v-drag>
    <div class="POIDialogTitle drag-handle">
      <div class="title-left">
        <div class="bar"></div>
        <div class="title-text">兴趣点搜索定位</div>
      </div>
      <div class="title-right">
        <div tabindex="0" class="icon" @click="closeDialog">×</div>
      </div>
    </div>
    <div
      class="POIDialogContent"
      style="height: 140px; justify-content: space-around"
    >
      <div class="search-box">
        <label style="width: 90px" for="POI">请输入兴趣点:</label>
        <input
          type="text"
          id="POI"
          class="search-input"
          placeholder="请输入"
          v-model="POI"
        />
      </div>
      <div class="search-box">
        <label
          style="width: 90px; text-align: right; margin-right: 10px"
          for="selectedPOI"
          >请选择:</label
        >
        <select
          id="selectedPOI"
          v-model="selectedPOI"
          style="
            width: 9rem;
            border-radius: 5px;
            height: 2rem;
            font-size: 0.8rem;
          "
        >
          <!-- 这里需要添加选项，例如： -->
          <option v-for="(item, index) in POIList" :value="item.location">
            {{ item.name }}
          </option>
          <!-- ...其他选项... -->
        </select>
      </div>
      <div class="search-button">
        <el-button type="primary" @click="POIToCenter">复位</el-button>
        <el-button type="primary" @click="POIToPosition">定位</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getPOILocation, getFavouritePlace,getWgs84toSz2000 } from "@/api/quickPosition.js";
import { transform } from "ol/proj";
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      POI: "",
      map: null,
      selectedPOI: "",
      POIList: [],
      markerLayer: null,
    };
  },
  watch: {
    POI: function (newValue, oldValue) {
      getFavouritePlace(newValue).then((res) => {
        this.POIList = res.data;
      });
    },
  },
  methods: {
    initMap() {
      setTimeout(() => {
        this.map = this.$store.getters.Map;
        if (this.map) {

        } else {
          console.error("地名搜索定位地图实例未找到");
        }
      }, 1000); // 延迟 1000 毫秒（1秒）后执行
    },
    closeDialog() {
      // 通过修改 prop 来关闭弹窗
      this.$emit("update:dialogVisible", false);
    },
    POIToPosition() {
      let coorLonLat = this.selectedPOI.split(",");
      // let afterTransCoor = transform(
      //   [coorLonLat[0], coorLonLat[1]],
      //   "EPSG:4326",
      //   "sz2000"
      // );
      let afterTransCoor = coorLonLat.join(" ");
      getWgs84toSz2000(afterTransCoor).then((res) => {
        console.log(res);
        afterTransCoor= res.split(" ");
        console.log(afterTransCoor[0],afterTransCoor[1],"定位成功");
        if (!this.markerLayer) {
        this.markerLayer = this.map.layer.createVectorLayer("pointMarkerLayer");
      }
      this.markerLayer.getSource().clear();
      this.map.marker.addMarker(
        afterTransCoor[0],
        afterTransCoor[1],
        this.markerLayer,
        {
          imgUrl: require("@/assets/bookMarker.png"),
          scale: 0.5, //大小
          radius: 1,
          pBorderColor: "#000000",
          pBorderWidth: 1,
          pFillColor: "",
        }
      );
      this.map.panTo([afterTransCoor[0], afterTransCoor[1]], 13);
      });

     
    },
    POIToCenter() {
      this.map.panTo([314497.81, 655844.5], 13);
    },
  },
  computed: {
    isPOIShow() {
      return this.dialogVisible;
    },
  },
  destroyed() {
    if (this.markerLayer) {
      this.markerLayer.getSource().clear();
    }
  },
  mounted() {
    this.initMap();
  },
};
</script>

<style lang="scss" scoped>
.POIContainer {
  width: 15vw;
  color: white;
  position: absolute;
  top: 5vh;
  right: -70vw;
  height: 46vh;
  z-index: 2;
  .POIDialogTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    font-size: 1rem;
    background-color: #285383;
    .title-left,
    .title-right {
      display: flex;
      align-items: center;
    }
    .bar {
      width: 5px; /* 小竖条的宽度 */
      height: 20px; /* 小竖条的高度 */
      background-color: white; /* 小竖条的颜色 */
      margin-right: 10px; /* 小竖条和文字之间的间距 */
    }
    .icon {
      width: 20px; /* 小方框的宽度 */
      height: 20px; /* 小方框的高度 */
      // border: 1px solid #4998f2; /* 小方框的边框 */
      margin-left: 5px; /* 小方框之间的间距 */
    }
    .icon:hover {
      color: #4998f2;
    }
    .icon:focus {
      color: #4998f2;
    }
  }
  .POIDialogContent {
    padding: 10px;
    display: flex;
    flex-direction: column;
    background-color: #285383;
    font-size: 0.8rem;
  }
  .search-box {
    display: flex; // 启用 flex 布局
    flex-direction: row; // 子元素水平排列
    width: 98%; /* 使两个搜索框并列显示，中间有一定的间隔 */
    line-height: 2rem;
    label {
      margin-left: 10px;
      font-size: 14px;
    }
  }
  .search-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .search-input {
    width: 51%;
    margin-left: 0.5rem;
    font-size: 14px;
    margin-top: 4px;
    margin-bottom: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
}

label {
  display: block;
  margin-bottom: 4px;
}
</style>
